<template>
    <div class="dialog-box">
        <el-dialog class="dialog" v-model="visible" title="加入黑名单" top="80px" draggable overflow :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false">
            <el-divider />
            <el-form ref="formRef" :model="form.re" label-width="auto" size="large" style="margin-top: 20px;">

                <el-form-item label="拉黑原因：" style="margin-bottom: 25px;">
                    <el-select v-model="form.re.blackReason" filterable clearable placeholder="选择拉黑原因" size="large" style="width: 50%;">
                        <el-option v-for="item in black_options.re" :label="item.name" :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注：" style="margin-bottom: 25px;">
                    <el-input v-model="form.re.remark" placeholder="输入备注" type="textarea" clearable/>
                </el-form-item>
            </el-form>
            <div class="footer-box">
                <el-button class="cancel" @click="handleCancel">取消</el-button>
                <el-button class="submit" @click="handleSubmit">确认</el-button>
            </div>
            <!-- <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleCancel">Cancel</el-button>
                <el-button type="primary" @click="visible = false">
                    Confirm
                </el-button>
            </div>
        </template> -->
        </el-dialog>
    </div>
</template>
  
<script setup>
import Api from '@/api'
const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    }
})
const visible = toRef(props, 'visible')

// 打开窗口
let user = reactive({
    re: {}
})
let currentCard = ref(0)
const open = (data) => {
    // console.log('data :>> ', data);
    user.re = data.user
    currentCard.value = data.currentCard
    // console.log(user.re, currentCard.value, user.re.cardList[0])
}
// 暴露方法
defineExpose({ open })

// 获取拉黑原因options
let black_options = reactive({ re: [] })
const get_black_options = (params) => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "orgCode": "0004", "contentData": { parentCode: 573 } }).then(res => {
        console.log('获取拉黑原因options res :>> ', res);
        black_options.re = res.result
    })
}
onMounted(() => {
    get_black_options()
})

let form = reactive({ re: {} })
// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')
}
// 确认
const formRef = ref()
const handleSubmit = (params) => {
    formRef.value.validate(valid => { //表单验证
        if (valid) {
            let data = {
                memberCode: user.re.memberCode,
                blackReason: form.re.blackReason,
                remark: form.re.remark,
            }
            console.log('data :>> ', data);
            // return
            Api.Common.PcObjProcess.Do({ "functionName": "MemberBlack", "orgCode": "0004", "contentData": data }).then(res => {
                console.log('拉黑 res :>> ', res);
                ElNotification({
                    title: '提示',
                    message: '拉黑成功',
                    type: 'success',
                })
                emit('emitSubmit', 'Submit')
            })
        }
    })
}
</script>
  
<style  lang="scss" scoped>
    @import '@/styles/com_style_input.css';
.dialog-box {

    ::v-deep {
        .el-dialog {
            width: 600px;
            // height: 400px;
            border-radius: 16px;
            padding-left: 60px;
            padding-right: 60px;
            padding-bottom: 40px;
        }

        .el-dialog__title {
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 36px;
            // padding-left: 60px;
        }

        .el-divider {
            margin: 0;
        }

        .el-form-item__label {
            font-size: 16px;
            color: #212121;

        }
    }

    .footer-box {
        margin-top: 60px;
        display: flex;
        justify-content: center;

        .cancel {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-size: 24px;
            color: #FF6A00;
        }

        .submit {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 30px;
        }
    }


}
</style>
  